<template>
	<view>
		<view class="titleBox">
			<view class="searchBox">
				<u-icon class="gridBox" name="car-fill" color="#55aa7f" size="30" @click="typeSearch"></u-icon>
				<u-button type="success" size="mini" :ripple="true" style="margin-top: 2px;margin-left: 15px;">{{type}}</u-button>
				<u-search 
					:placeholder="'请输入三元名称或编号'" 
					v-model="carType" height="60" 
					:show-action="false" 
					style="margin-left: 2px;" 
					bg-color="#ffffff" 
					@change="search" 
					@clear="clear">
				</u-search>
				<!-- <u-select v-model="show" :list="options" @confirm="confirm"></u-select> -->
			</view>
			<u-icon class="gridBox" name="grid-fill" color="#55aa7f" size="30" @click="changeList"></u-icon>
		</view>
		<u-waterfall v-model="threeElementsInfo" v-show="threeElementsInfoShow && girdListShow" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view v-for="(item, index) in leftList" :key="index" class="demo-warter" @click="gotoThreeElementDetails(item)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.imgSources[0]" :index="index"></u-lazy-load>
					<view class="demo-name">{{item.name}}</view>
					<view class="demo-price">参考价 : ￥ {{item.referencePrice}}</view>
					<view class="demo-price">含量价 : ￥ {{item.contentPrice}}</view>
					<view class="demo-tag">
						<view class="demo-tag-owner" v-show="item.type">{{item.type}}</view>
						<view class="demo-tag-text" v-show="item.params">{{item.params}}</view>
					</view>
					<view class="demo-shop">粉重 : {{item.weight}} kg</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view v-for="(item, index) in rightList" :key="index" class="demo-warter" @click="gotoThreeElementDetails(item)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.imgSources[0]" :index="index"></u-lazy-load>
					<view class="demo-name">{{item.name}}</view>
					<view class="demo-price">参考价 : ￥{{item.referencePrice}}</view>
					<view class="demo-price">含量价 : ￥{{item.contentPrice}}</view>
					<view class="demo-tag">
						<view class="demo-tag-owner" v-show="item.type">{{item.type}}</view>
						<view class="demo-tag-text" v-show="item.params">{{item.params}}</view>
					</view>
					<view class="demo-shop">粉重 : {{item.weight}} kg</view>
				</view>
			</template>
		</u-waterfall>
		<view v-show="threeElementsInfoShow && !girdListShow" style="padding: 2%;" v-model="threeElementsInfo">
			<view v-for="(item, index) in threeElementsInfo" :key="index" class="listBox" @click="gotoThreeElementDetails(item)">
				<view class="item">
					<image mode="aspectFill" :src="item.imgSources[0]" />
					<view class="flex-column">
						<view class="title-wrap">
							<text class="title u-line-2">{{ item.name }}</text>
						</view>
						<view class="flex-row">
							<text class="demo-price">参考价 : ￥{{item.referencePrice}}</text>
							<text class="demo-price" style="margin-left: 30px;">含量价 : ￥{{item.contentPrice}}</text>
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner" v-show="item.type">{{item.type}}</view>
							<view class="demo-tag-text" v-show="item.params">{{item.params}}</view>
							<view class="demo-tag-type" v-show="item.carType">{{item.carType}}</view>
						</view>
					</view>
				</view>
				<u-gap height="10" bg-color="#f0f0f0"></u-gap>
			</view>
		</view>
		<u-loadmore v-show="threeElementsInfoShow" bg-color="rgb(240, 240, 240)" :status="status" @loadmore="addRandomData" :load-text="loadText" font-size="30" margin-bottom="20"></u-loadmore>
		<view v-show="threeElementsInfoShow == false" class="flex-column nothreeElementsInfoBox">
			<image src="../../../static/logo.png"></image>
			<text>暂无三元列表信息 ~ </text>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		url_1,
		url_2,
		url_3
	} from '@/common/js/api/url.js'
	import store from '@/store/index.js';
	import {getMaterial} from "@/common/js/api/api.js";
	export default {
		onLoad() {
			// uni.showLoading({
			//   title: '加载中'
			// });
			uni.startPullDownRefresh();
			this.onShareAppMessage();
			this.onShareTimeline();
		},
		onTabItemTap() {
			this.i = 0;
			this.status = 'loadmore';
			this.carType = '';
			this.carTypetabShow = true;
			this.carTypetab = '';
			uni.setStorageSync('carType','');
		},
		data() {
			return {
				threeElementsInfoShow: true,
				threeElementsInfo: [],
				carType: '',
				carTypetab: '',
				carTypetabShow: false,
				girdListShow: true,
				type: '全部',
				show: false,
				totalElements: 0,
				i: 0,
				status: 'loadmore',
				// options: [{
				// 	label: '车型',
				// 	value: 1,
				// },{
				// 	label: '描述',
				// 	value: 2,
				// },{
				// 	label: '名称',
				// 	value: 3,
				// }],
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		onPullDownRefresh() {
			uni.setStorageSync('carType', '');
			this.carTypetab = uni.getStorageSync('carType');
			this.type = '全部';
			this.carType = '';
			setTimeout(() =>{
				uni.stopPullDownRefresh();
				this.getMaterialData();
			}, 1000);
		},
		onShow() {
			this.carTypetab = uni.getStorageSync('carType');
			// this.carType = '';
			// this.status = 'loading';
			if(this.carTypetab != '') {
				this.type = this.carTypetab;
				this.i = 0;
				this.status = 'loadmore';
			}
			if(this.carTypetab != '' && this.carType == '') {
				// uni.showLoading({
				//   title: '加载中'
				// });
				this.threeElementsInfo = [];
				let queryObj = {
					blurry: this.carType,
					carType: this.carTypetab,
					page: 0,
					size: 8
				}
				this.getList(queryObj);
			}
		},
		methods: {
			addRandomData() {
				this.status = 'loading';
				// uni.showLoading({
				//     title: '加载中'
				// });
				if(this.i < this.totalElements - 1) {
					this.i += 1;
					let obj = {
						blurry: this.carType,
						carType: this.carTypetab,
						page: this.i,
						size: 8
					};
					this.getList(obj);
					this.status = 'loadmore';
				}else {
					this.status = 'nomore';
				}
			},
			// carTypeSearch(carType) {
			// 	this.carType = carType;
			// 	this.getMaterialData();
			// },
			getMaterialData() {
				if(!this.carTypetabShow && this.carTypetab != '' && this.carType == '') {
					let queryObj = {
						blurry: this.carType,
						carType: this.carTypetab,
						page: 0,
						size: 8
					}
					this.getList(queryObj);
				}
				if(this.carType != '') {
					this.threeElementsInfo = [];
					this.$refs.uWaterfall.clear();
					
					// if(this.type == '车型') {
					// 	let queryObj = {
					// 		carType: this.carType,
					// 		page: 0,
					// 		size: 8
					// 	}
					// 	this.getList(queryObj);
					// }
					// if(this.type == '描述') {
					// 	let queryObj = {
					// 		description: this.carType,
					// 		carType: this.carTypetab,
					// 		page: 0,
					// 		size: 8
					// 	}
					// 	this.getList(queryObj);
					// }
					// if(this.type == '名称') {
						let queryObj = {
							blurry: this.carType,
							carType: this.carTypetab,
							page: 0,
							size: 8
						}
						this.getList(queryObj);
					// }
				}else {
					this.threeElementsInfo = [];
					this.$refs.uWaterfall.clear();
					let queryObj = {
						blurry: this.carType,
						carType: this.carTypetab,
						page: 0,
						size: 8
					};
					this.getList(queryObj);
				}
			},
			GetRoundDd(num, len) {
				return num.toFixed(len);
			},
			getList(queryObj) {
				if(this.carTypetab != '' && queryObj.page == 0) {
					this.threeElementsInfo = [];
					this.$refs.uWaterfall.clear();
				}
				getMaterial(queryObj).then(res => {
					if(res.data.totalElements > 0) {
						// queryObj['size'] = res.data.totalElements;
						this.totalElements = res.data.totalElements / 8;
						getMaterial(queryObj).then(res1 => {
							this.carTypetabShow = false;
							let unitPrice = wx.getStorageSync('unitPrice');
							let threeElementsInfo = res1.data.content;
							threeElementsInfo.forEach(item => {
								item.imgSources = item.imgSources.map(imgUrl => {
									// let split1 = imgUrl.replaceAll("\\", "/");
									let split1 = this.replaceAllPath(imgUrl, "\\", "/");
									return url_1 + "/file/" + split1;
								});
								let pall = item.palladium / 1000 * unitPrice.pallBid;
								let plat = item.platinum / 1000 * unitPrice.platBid;
								let rhod = item.rhodium / 1000 * unitPrice.rhodBid;
								item.weight = this.GetRoundDd(item.weight, 4);
								item['pall'] = item.palladium / 1000;
								item['plat'] = item.platinum / 1000;
								item['rhod'] = item.rhodium / 1000;
								item['pallPrice'] = Math.round(pall * item.weight * 0.8);
								item['platPrice'] = Math.round(plat * item.weight * 0.8);
								item['rhodPrice'] = Math.round(rhod * item.weight * 0.8);
								item['contentPrice'] = Math.round((pall + plat + rhod) * item.weight);
								item['referencePrice'] = Math.round((pall + plat + rhod) * item.weight * 0.8);
								if(queryObj.page != 0) {
									this.threeElementsInfo.push(item);
								}else {
									this.threeElementsInfo = threeElementsInfo;
								}
							});
							this.threeElementsInfoShow = true;
						})
						uni.hideLoading();
					}else {
						uni.hideLoading();
						this.threeElementsInfoShow = false;
						this.threeElementsInfo = [];
					}
				})
			},
			changeList() {
				// this.carType = '';
				this.i = 0;
				this.threeElementsInfo = [];
				this.$refs.uWaterfall.clear();
				this.status = 'loadmore';
				this.girdListShow = !this.girdListShow;
				let queryObj = {
					blurry: this.carType,
					carType: this.carTypetab,
					page: 0,
					size: 8
				}
				this.getList(queryObj);
			},
			search() {
				this.getMaterialData();
			},
			clear() {
				this.carType = '';
				this.threeElementsInfo = [];
				this.getMaterialData();
			},
			confirm(e) {
				this.type = e[0].label; 
			},
			gotoThreeElementDetails(item) {
				uni.navigateTo({
					url: '../../threeElementDetails/threeElementDetails?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			typeSearch() {
				uni.switchTab({
					url: '../brand/brand'
				})
			},
			replaceAllPath(params, str1, str2) {
				let temp = params.replace(str1, str2);
				if(temp.indexOf(str1) > -1) {
					return replaceAll2(temp, str1, str2);
				}else {
					return temp;
				}
			},
			onShareAppMessage() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			},
			onShareTimeline() {
				const promise = new Promise(resolve => {
					setTimeout(() => {
						resolve({
							title: '鑫三元催化风向标'
						})
					}, 1000)
				})
				return {
					title: '鑫三元催化风向标',
					promise 
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
	.titleBox {
		background-color: #FFFFFF;
		padding: 2%;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}
	.searchBox{
		display: flex;
		flex-direction: row;
		width: 87%;
		margin-left: 3%;
	}
	.gridBox {
		background-color: #FFFFFF;
		border-radius: 50%;
		box-shadow: 2px 2px 4px #8C8C8C;
		padding: 2%;
	}
	.demo-warter {
		border-radius: 10px;
		margin: 5%;
		background-color: #ffffff;
		padding: 6%;
		position: relative;
	}
	.demo-image {
		width: 100%;
		border-radius: 10px;
	}
	.demo-name {
		width: 40vw;
		font-size: 24rpx;
		margin-top: 8px;
		font-weight: 600;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.demo-tag {
		display: flex;
		margin-top: 6px;
	}
	.demo-tag-owner {
		background-color: #DD524D;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	.demo-tag-text {
		border: 1px solid #00557F;
		color: #00557F;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	.demo-tag-type {
		background-color: #55aa7f;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
		margin-left: 10px;
	}
	.demo-price {
		font-size: 26rpx;
		color: #DD524D;
		margin-top: 8px;
	}
	.demo-shop {
		font-size: 11px;
		color: #5b5b5b;
		margin-top: 6px;
	}
	.nothreeElementsInfoBox {
		height: 100vh;
		background-color: #FFFFFF;
		padding: 10%;
		align-items: center;
	}
	.nothreeElementsInfoBox image {
		height: 80px;
		width: 80px;
		margin-top: 35%;
	}
	.nothreeElementsInfoBox text {
		font-weight: 600;
		margin-top: 5%;
	}
	.item {
			display: flex;
			padding: 2.5%;
		}
	.item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		width: 70vw;
	}
	.listBox {
		background-color: #FFFFFF;
	}
</style>